<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <link rel="stylesheet" href="../../css/lianmai.css">
    <style>
        html,
        body {
            background: transparent;
        }

        .bg.no-bg {
            background: transparent;
            pointer-evert:none;
        }

        .camera {
            text-align: center;
            /* position: absolute;
            right: 20px; */
            width: 30vw;
        }

        .camera img {
            width: 35px;
        }

        .camera .text {
            font-size: 14px;
            color: #fff;
            margin-top: 20px;
        }

        .time {
            text-align: center;
            color: #fff;
            font-size: 14px;
        }

        /* 礼物 */
        .gift-box {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
        }

        .gift-box .g-content {
            animation-name: big;
            animation-duration: 3s;
            animation-iteration-count: 1;
            text-align: center;
        }

        .gift-box img {
            width: 240px;
            height: 240px;
            object-fit: contain;
        }

        .gift-box p {
            color: #fff;
            font-size: 18px;
        }

        @keyframes big {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }
        .tip{
            background: #ec8945;
            color: #FFFFFF;
            border-radius: 10px;
            margin: 20px auto;
            font-size: 14px;
            padding: 4px 10px;
        }
    </style>
</head>

<body>
    <div v-cloak class="bg" id="view" :class="{'no-bg':type == 1}">
        <div class="user-wrap" v-if="type != 1">
            <div class="tip">严禁低俗,漏点,污秽等行为,一经发现立即封号</div>
            <div class="tx img-h">
                <!-- <img src="../../image/test/01.jpg" alt=""> -->
                <img :src="returnImg(ffInfo.head_portrait)" onerror="this.src='../../image/touxiang.png'" alt="" />
            </div>
            <p class="name">{{ffInfo.name}}</p>
            <p v-if="type == -1">{{_i18n('正在等待对方接受邀请')}}</p>
            <p v-if="type == 0">{{_i18n('邀请您视频')}}</p>
            <p v-if="type == 1">{{_i18n('正在通话中')}}</p>
        </div>
        <div class="gift-box flex-c" v-if="gInfo.cover">
            <div class="g-content">
                <img :src="returnImg(gInfo.cover)" onerror="this.src='../../image/error-img.png'" alt="">
                <p>{{gInfo.txt}}</p>
            </div>
        </div>
        <footer id="fx-footer">
            <p class="time" v-if="type == 1">{{time}}</p>
            <div :class="{'flex-bt':type==0, 'flex-c':type!=0}">
                <div class="camera" v-if="type == 1" onclick="showFloatView()">
                    <img src="../../image/suoxiao.png" alt="">
                    <p class="text">{{_i18n('收起')}}</p>
                </div>
                <div class="camera" v-if="type == 1" onclick="switchCamera()">
                    <img src="../../image/chat/photo_footage_icon.png" alt="">
                    <p class="text">{{_i18n('切换摄像头')}}</p>
                </div>
                <div class="btn-wrap" onclick="refuse()">
                    <i class="cancel-icon"></i>
                    <button class="cancel-btn btn" v-if="type == -1">{{_i18n('取消')}}</button>
                    <button class="cancel-btn btn" v-if="type == 0">{{_i18n('拒绝')}}</button>
                    <button class="cancel-btn btn" v-if="type == 1">{{_i18n('挂断')}}</button>
                </div>
                <div class="btn-wrap" v-if="type == 0" onclick="call()">
                    <i class="sub-icon"></i>
                    <button class="sub-btn btn">接听</button>
                </div>
                <div class="camera" v-if="type == 1" onclick="showDetail('modal/gift_modal',{uid: view.touserid})">
                    <img src="../../image/chat/gift.png" alt="">
                    <p class="text">{{_i18n('礼物')}}</p>
                </div>

                <div class="camera" v-if="type == 1" onclick="openMeiyan()">
                    <img src="../../image/photograph_btn_tags.png" alt="">
                    <p class="text">{{_i18n('美颜')}}</p>
                </div>
            </div>
        </footer>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/chat.js"></script>
<script>
    var view = new Vue({
        
        el: '#view',
        data: {
            type: 0, // 连接情况 -1发起 0 未连接 1已连接
            status: 0, // 后端是否有推送状态过来
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            time: '00:00',
            types: 2, // 1语音|2视频
            myuserid: 0,
            touserid: 0,
            touser_sex : '',
            order: '',
            intimate: 0, // 是否需要限制亲密度 1需要 0不需要
            gInfo: {},
        },
        methods: {
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
        }
    })
    apiready = function() {


        view.intimate = api.pageParam['intimate'] || 0;
        view.myuserid = $api.getStorage('userid');
        view.touserid = api.pageParam['id'];
        view.type = api.pageParam['type'];
        if (api.pageParam['orderid']) {
            // 发起方推过来的订单id
            view.order = api.pageParam['orderid'];
            $api.setStorage('cm_order_id', view.order);
        }

        console.log('cm_order_id',$api.getStorage('cm_order_id'))
     
        if(view.type == 1){
            //正在通话中，计算时间
            const t = $api.getStorage('leaveTime') ?  Math.ceil((new Date().getTime() - $api.getStorage('leaveTime'))/1000) : 0
           payForChat(t);
                   cheUserBalance();
            showCallTime(t);

            // _ajax('api/member/cheMic', function(ret, err) {
            //     if (ret && ret.code != 200) {
            //         // _leave();
            //         // returnStatus(2);
            //         // _alert(ret.msg, function() {
            //         // // _closeChat();
            //         // })  
            //         // returnStatus(0); // 推给对方
            //         // _closeChat();
            //         // _leave();

            //         //yushu
            //         setTimeout(function() {
            //             console.log('setTimeout',ret.data.yushu)
            //             payForChat(t,ret.data.yushu);
            //             cheUserBalance();
            //         }, ret.data.yushu)
            //     } else {
                   
            //         cheUserBalance();
            //     }
            // }, {
            //     user_id: view.myuserid,
            //     orderid: view.order,
            //     seconds:t
            // })


            
        }

        _listener('viewappear', function() {
            if ($api.getStorage('callStatus') == 0 && $api.getStorage('requestStatus') == 0) {
                api.closeWin();
            }
        })

        // 获取对方资料
        _getUser(function(ret) {
            view.ffInfo = ret.result;
            view.touser_sex = ret.result.sex
        }, view.touserid, 1)

        $api.setStorage('callStatus', 1); // 正在通话中
        if (view.type == -1) {
            createOrder(function() {
                // 发起 要求后端推送B方
                sendB();
                console.log("setOrder1",view.order)
                api.execScript({
                    script: 'setOrderId(' + view.order + ')'
                })
            })
        }

        // 监听 后端推送过来的 1接听/0挂断 状态
        _listener('returnRequest', function(ret) {
            var data = ret.value;
			api.sendEvent({
				name:'sonPageParam',
				extra:data
			});
            if (data.types == view.types) {
                if (data.uid == view.touserid) { // 如果状态是当前接听用户返回的
                    if (data.status == 0) {
                        _leave();
                        
                       
                        console.log('对方已挂断')
                        _msg('对方已挂断');
                        _closeChat(1);
                        setTimeout(() => {
                           // createMicDeduction();
                        }, 100);
                    } else if (data.status == 1) {
                        view.type = 1;
                        $api.setStorage('leaveTime', new Date().getTime())
                        const t = $api.getStorage('leaveTime') ?  Math.ceil((new Date().getTime() - $api.getStorage('leaveTime'))/1000) : 0
                        // 通话连接成功 开始扣费 接下来的一分钟
                        payForChat(t);
                        cheUserBalance();
                        showCallTime();
                    } else if (data.status == 2) {
                        _leave();
                        
                        console.log('对方余额不足，无法继续支持本次通话')
                        _alert('对方余额不足，无法继续支持本次通话', function() {
                            _closeChat();
                        })
                        setTimeout(() => {
                            //createMicDeduction();
                        }, 200);
                    } else if (data.status == 3) {
                        _leave();
                       
                        console.log('对方忙线中，请稍后再拨')
                        _alert('对方忙线中，请稍后再拨', function() {
                            _closeChat();
                        })
                        setTimeout(() => {
                            //createMicDeduction();
                        }, 400);
                    } else if (data.status == 4) {
                        _leave();
                       
                        console.log('对方已挂断')
                        _msg('对方已挂断');
                        _closeChat(1);
                        setTimeout(() => {
                            //createMicDeduction();
                        }, 500);
                    }
                    view.status = 1;
                }
            }
        })

        _listener('newmsg', function(ret) {
            var data = ret.value.data.new[0];
            console.log(JSON.stringify(data));
            if (data.type != 8) return;
            if ((data.userid == view.myuserid || data.userid == view.touserid) ) {
                var g = data.data;
                if (data.userid == view.myuserid) {
                    g.txt = `你给对方送了${g.num}个${g.name}`;
                } else {
                    g.txt = `对方给你送了${g.num}个${g.name}`;
                }

                view.gInfo = g;
                setTimeout(function() {
                    view.gInfo = {};
                }, 3500)
            }
        })
       
    }

    function exitRoom(){
        mhsdkApi.stopPreview();
        api.closeWin();
    }

    // 加入
    function _join(uid) {
        api.execScript({
            script: '_join(' + uid + ')'
        })
        // artc.join('channel' + uid, view.myuserid);
    }

    function createMicDeduction(){
        // _ajax('api/member/createMicDeduction', function() {}, {
            
        //     orderid: view.order, // 订单id
        // })
    }
    // 离开
    function _leave() {

    
        $api.setStorage('callStatus', 0); // 不在通话中
        $api.rmStorage('leaveTime')
        view.gInfo = {};
        api.execScript({
            script: '_leave()'
        })
    }

    function switchCamera() {
        api.execScript({
            script: 'switchCamera()'
        })
    }

    function openMeiyan() {
        api.execScript({
            script: 'openMeiyan()'
        })
    }

    function showFloatView() {

        api.execScript({
            script: 'showFloatView()'
        })
    }
    function changeBigView() {
        api.execScript({
            script: 'changeBigView()'
        })
    }
</script>

</html>
